
<template>
  <div class="common-easy-tab content_box">
    <div class="tab-list">
      <div v-for="tab in tabList" :key="tab.value" class="tab-item" :class="{ 'tab-item-active': active === tab.value }"
        @click.stop="handleClickTab(tab)">
        {{ tab.label }}
      </div>
    </div>
    <div class="right">
      {{ name }}
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="权重计算" name="first">
          <fights></fights>
        </el-tab-pane>
        <el-tab-pane label="指标赋值" name="second"><second></second></el-tab-pane>
        <el-tab-pane label="查看结果" name="third"><third></third></el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import { modelListAPI } from "@/api/model"
import fights from "@/components/fights/index.vue"
import second from "@/components/second/index.vue"
import third from "@/components/third/index.vue"
export default {
  name: 'common-easy-tab',
  components:{
    fights,
    second,
    third
  },
  data() {
    return {
      tabList: [
        { label: '战场环境影响分析模型', value: 0 },
        { label: '地理环境影响分析模型', value: 1 },
        { label: '气象环境影响分析模型', value: 2 },
        { label: '水文环境影响分析模型', value: 3 },
        { label: '电磁环境影响分析模型', value: 4 },
        { label: '社会环境影响分析模型', value: 5 },
      ],
      active: 0,
      name: "战场环境影响分析模型",
      activeName: 'first'
    };
  },
  mounted() {
    this.modelList()
  },

  methods: {
    async modelList() {
      const res = await modelListAPI()
    },
    handleClickTab(val) {
      console.log(val)
      this.name = val.label
      this.active = val.value
    },
  },
};
</script>

<style lang="scss" scoped>
.common-easy-tab {
  display: flex;
  // align-items: center;
  // justify-content: space-between;


  .tab-list {
    // display: flex;
    // align-items: center;
    // gap: 10px;
    width: 15%;

    .tab-item {
      height: 38px;
      line-height: 38px;
      padding: 0 37px 0 20px;
      color: #fff;
      margin-bottom: 10px;
    }

    .tab-item-active {
      // background-image: linear-gradient(180deg, #295a91 0%, #1c6ea8 100%);
      color: #13c2c2;
    }
  }

  .right {
    width: 100%;
    height: 100%;
    background-color: #1d1e1f;
    border: 2px solid #707070;
    padding: 20px 50px;
  }
}

.tabs {
  margin: 23px 29px;

  ::v-deep .el-tabs__item {
    color: #fff;
    font-size: 16px;
  }

  ::v-deep .el-tabs__item.is-active {
    color: #13c2c2;
  }

  ::v-deep .el-tabs__active-bar {
    background-color: #13c2c2;
  }
}
</style>
